<template>
  <div>
    <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xml" @change="handleClick">
    <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
      Drop excel file here or
      <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">
        Browse
      </el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import x2js from 'x2js'

@Component({
  name: 'UploadExcel'
})
export default class extends Vue {
  @Prop({ required: true }) public beforeUpload!: Function
  @Prop({ required: true }) public onSuccess!: Function

  public loading = false
  public excelData = {
    header: null,
    results: null
  }


  public handleDrop(e: DragEvent) {
    e.stopPropagation()
    e.preventDefault()
    if (this.loading) return
    if (!e.dataTransfer) return
    const files = e.dataTransfer.files
    if (files.length !== 1) {
      this.$message.error('Only support uploading one file!')
      return
    }
    const rawFile = files[0] // only use files[0]

    if (!this.isExcel(rawFile)) {
      this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')
      return false
    }
    this.upload(rawFile)
    e.stopPropagation()
    e.preventDefault()
  }

  public handleDragover(e: DragEvent) {
    e.stopPropagation()
    e.preventDefault()
    if (e.dataTransfer) {
      e.dataTransfer.dropEffect = 'copy'
    }
  }

  public handleUpload() {
    (this.$refs['excel-upload-input'] as HTMLInputElement).click()
  }

  public handleClick(e: MouseEvent) {
    const files = (e.target as HTMLInputElement).files
    if (files) {
      const rawFile = files[0] // only use files[0]
      this.upload(rawFile)
    }
  }

  public upload(rawFile: File) {
    (this.$refs['excel-upload-input'] as HTMLInputElement).value = '' // Fixes can't select the same excel
    if (!this.beforeUpload) {
      this.readerData(rawFile)
      return
    }
    const before = this.beforeUpload(rawFile)
    if (before) {
      this.readerData(rawFile)
    }
  }

  public readerData(rawFile: File) {
    this.loading = true
    let __self: any = this;
    const reader = new FileReader()
    reader.onload = e => {
      let r=e.target as FileReader
      const data:any = (e.target as FileReader).result
      let blob=new Blob()
      let reader=new FileReader();
      r.readAsArrayBuffer(blob)
      reader.readAsText(blob,"utf-8")
      reader.onload=()=>{
          let v=JSON.parse(reader.result as any)
          console.error(v);
      }


      var result = __self.$x2js.xml2js(data)
      console.error(result)
      this.loading = false
    }
    reader.readAsArrayBuffer(rawFile)
  }


  public isExcel(file: File) {
    return /\.(xml)$/.test(file.name)
  }
}
</script>

<style lang="scss" scoped>
.excel-upload-input {
  display: none;
  z-index: -9999;
}

.drop {
  border: 2px dashed #bbb;
  width: 600px;
  height: 160px;
  line-height: 160px;
  margin: 0 auto;
  font-size: 24px;
  border-radius: 5px;
  text-align: center;
  color: #bbb;
  position: relative;
}
</style>
